<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>

<div id="app">

	<a href="#/login">登录</a>
	<a href="#/register/12">注册</a>
	<hr />
	<router-link to="/login?id=乐视集团&&name=张总" tag="span">登录</router-link>
	<router-link to="/register/12">注册</router-link>


	<transition appear mode="out-in">
		<router-view></router-view>
	</transition>

</div>

<script type="text/javascript">
	var login = {
		template: '<h1>登录组件 {{$route.query.id}}--{{$route.query.name}}</h1>',
		created() {
			console.log(this.$route)
		}
	}

	var register = {
		template: '<h1>注册组件---{{$route.params.id}}</h1>'
	}

	var routerobj = new VueRouter({
		routes: [
			//			{path:'/',component:login},
			{
				path: '/',
				redirect: '/login' //redirect重定向
			},
			{
				path: '/login',
				component: login
			},
			{
				path: '/register/:id',
				component: register
			}
		],
		linkActiveClass: 'myrouter', //默认值可以通过路由的构造选项 linkActiveClass 来修改默认的类名
	})

	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		components: {},
		router: routerobj,
	})
</script>


<style type="text/css">
	/*.router-link-active {
		color: red;
		font-size: 24px;
	}*/

	.myrouter {
		color: red;
		font-size: 24px;
	}

	.v-enter,
	.v-leave-active {
		opacity: 0;
		transform: translateX(150px);
	}

	.v-enter-active,
	.v-leave-active {
		transition: all 1s ease;
	}
</style>